<template>
    <div>
        <el-card class="box-card  custom-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">基础信息</h3>
                <div class="info-row">
                    <div class="info-item">订单编号：
                        <span><el-input placeholder='' style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.snowId" :disabled="true"></el-input></span>
                    </div>
                    <div class="info-item">客户名称：
                        <span><el-select clearable filterable placeholder="请选择" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.customerId" :disabled="isCustomerDisabled"
                                @change="handleCustomerChange">
                                <el-option v-for="customer in customers" :label="customer.name" :value="customer.id"
                                    :key="customer.id">
                                </el-option>
                            </el-select></span>
                    </div>
                    <div class="info-item">用户名称：
                        <span><el-input clearable placeholder="" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.userName" :disabled="isUserDisabled"></el-input></span>
                    </div>

                </div>
                <div class="info-row">
                    <div class="info-item">始发地: &nbsp; &nbsp; &nbsp;
                        <span><el-cascader :options="originOptions" :props="props" clearable placeholder="请选择始发地"
                                v-model="normalOrder.dpaAddress3"
                                style="width: 180px; margin-left: 10px;"></el-cascader></span>
                    </div>
                    <div class="info-item">目的地：&nbsp; &nbsp;
                        <span><el-cascader :options="originOptions" :props="props" clearable placeholder="请选择目的地"
                                v-model="normalOrder.cdaAddress3"
                                style="width: 180px; margin-left: 10px;"></el-cascader></span>
                    </div>
                    <div class="info-item">订单类型：
                        <span><el-select filterable placeholder="请选择" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.orderType">
                                <el-option v-for="orderType in orderTypes" :key="orderType.value"
                                    :label="orderType.label" :value="orderType.value">
                                </el-option>
                            </el-select></span>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-item">货物类型：
                        <span><el-select filterable placeholder="请选择" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.goodsType">
                                <el-option v-for="goodsType in goodsTypes" :key="goodsType.value"
                                    :label="goodsType.label" :value="goodsType.value">
                                </el-option>
                            </el-select></span>
                    </div>
                   
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>
                <div class="info-row">
                    <div class="info-item">订单来源：
                        <span >{{ orderSource }}</span>
                    </div>
                    <div class="info-item">合同：&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                        <span >{{ contractType }}</span>
                    </div>
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>
            </div>
        </el-card>

        <!-- 发货信息区域 -->
        <el-card class="box-card custom-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #dc780e;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">发货信息</h3>
                <div class="info-row">
                    <div class="info-item">发货地址：
                        <span><el-input placeholder="" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.faHuoAddress"></el-input></span>
                    </div>
                    <!-- <div class="info-item">计划发货时间：
                        <span><el-date-picker type="datetime" placeholder="选择日期时间"
                                v-model="normalOrder.expectedShipmentTime" style="width: 180px; margin-left: 10px;">
                            </el-date-picker></span>
                    </div> -->
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>
            </div>
        </el-card>


        <!-- 收货信息区域 -->
        <el-card class="box-card custom-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #13d941;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">收货信息</h3>
                <div class="info-row">
                    <div class="info-item">联系人姓名：
                        <span><el-input placeholder="" style="width: 180px; margin-left: 10px;" :disabled="true"
                                v-model="this.normalOrder.contcompanyContactactName"></el-input></span>
                    </div>
                    <div class="info-item">联系电话：
                        <span><el-input placeholder="" style="width: 180px; margin-left: 10px;" :disabled="true"
                                v-model="this.normalOrder.contactInfo"></el-input></span>
                    </div>
                    <div class="info-item">收货地址：
                        <span><el-input placeholder="" style="width: 180px; margin-left: 10px;" :disabled="true"
                                v-model="this.normalOrder.customerAddress"
                                :title="normalOrder.customerAddress"></el-input></span>
                    </div>
                </div>
                <div>
                    <!-- <div class="info-item">计划收货时间：
                        <span><el-date-picker type="datetime" placeholder="选择日期时间"
                                v-model="normalOrder.expectedDeliveryTime" style="width: 180px; margin-left: 10px;">
                            </el-date-picker></span>
                    </div> -->
                </div>
            </div>
        </el-card>

        <!-- 货物信息区域 -->
        <el-card class="box-card custom-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">货物信息</h3><br>
                <el-button plain @click="addGoods">添加</el-button>
                <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column prop="goodsName" label="货物名称"></el-table-column>
                    <el-table-column prop="goodsSmallCount" label="数量"></el-table-column>
                    <el-table-column prop="goodsVolume" label="单件体积 (m³)"></el-table-column>
                    <el-table-column prop="goodsWeight" label="单件重量 (kg)"></el-table-column>
                    <el-table-column label="总体积 (m³)">
                        <template slot-scope="scope">
                            {{ scope.row.goodsVolume * scope.row.goodsSmallCount }}
                        </template>
                    </el-table-column>
                    <el-table-column label="总重量 (kg)">
                        <template slot-scope="scope">
                            {{ scope.row.goodsWeight * scope.row.goodsSmallCount }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 费用信息区域 -->
        <el-card class="box-card custom-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">费用信息</h3>
                <div class="info-row">
                    <div class="info-item">计费方式：
                        <span><el-select filterable placeholder="请选择" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.billingMethod">
                                <el-option v-for="billingMethod in billingMethods" :key="billingMethod.value"
                                    :label="billingMethod.label" :value="billingMethod.value">
                                </el-option>
                            </el-select></span>
                    </div>
                    <div class="info-item">运输费：
                        <span><el-input placeholder="" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.transportationFee" type="number"></el-input></span>
                    </div>
                    <div class="info-item">保险费：
                        <span><el-input placeholder="" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.insuranceFee" type="number"></el-input></span>
                    </div>
                    <div class="info-item">包装费：
                        <span><el-input placeholder="" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.packagingFee" type="number"></el-input></span>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-item">装卸费：
                        <span><el-input placeholder="" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.loadingFee" type="number"></el-input></span>
                    </div>
                    <div class="info-item">中转费：
                        <span><el-input placeholder="" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.transferFee" type="number"></el-input></span>
                    </div>
                    <div class="info-item">服务费：
                        <span><el-input placeholder="" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.serviceFee" type="number"></el-input></span>
                    </div>
                    <div class="info-item">其他费用：
                        <span><el-input placeholder="" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.otherFees" type="number"></el-input></span>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-item">付款方式:
                        <span><el-select filterable placeholder="请选择" style="width: 180px; margin-left: 10px;"
                                v-model="normalOrder.paymentMethod">
                                <el-option v-for="paymentMethod in paymentMethods" :key="paymentMethod.value"
                                    :label="paymentMethod.label" :value="paymentMethod.value">
                                </el-option>
                            </el-select></span>
                    </div>
                    <div class="info-item" style="color: red;">费用合计：
                        <span><el-input placeholder="" style="width: 180px; margin-left: 10px;" :value="totalFee"
                                :disabled="true"></el-input></span>
                    </div>
                    <div class="info-item"></div> <!-- 空白占位符 -->
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>
            </div>
        </el-card>

        <el-card class="box-card custom-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block; 
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">订单备注</h3>
                <div class="info-row">
                    <div>订单备注:
                        <span><el-input placeholder="" style="width: 500px; margin-left: 10px;"
                                v-model="normalOrder.remarks"></el-input></span>
                    </div>
                </div>
            </div>
        </el-card>

        <div class="button-group fixed-buttons-horizontal">
            <el-button @click="refresh">取消</el-button>
            <el-button type="primary" @click="createOrder">保存</el-button>
        </div>



        <!--        //添加货物弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="货物列表" :visible.sync="addGoodsVisible" width="70%">
            <el-table :data="goods" style="width: 100%; margin-top: 20px;">
                <el-table-column prop="goodsId" label="序号" width="180"></el-table-column>
                <el-table-column prop="goodsName" label="货物名称" width="180"></el-table-column>
                <el-table-column prop="goodsVolume" label="体积" width="180"></el-table-column>
                <el-table-column prop="goodsWeight" label="重量" width="180"></el-table-column>
                <el-table-column label="数量">
                    <template slot-scope="scope">
                        <el-input-number :min="0" v-model="scope.row.goodsSmallCount"
                            @change="handleCountChange(scope.row)"></el-input-number>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer">
                <el-button @click="addGoodsVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAddGoods">确 定</el-button>
            </div>
        </el-dialog>
        <!--        //添加货物弹框结束----------------------------------------------------------------------------------------------------->
    </div>
</template>

<script>
export default {
    data() {
        return {
            addGoodsVisible: false,//控制货物添加弹窗
            num: 0,
            originOptions: [],//复制张晨曦的
            props: { value: 'id', label: 'name', children: 'cityList' },  //配置级联选择器多选  还是复制张晨曦的
            normalOrder: { snowId: '', customerId: '', },
            customers: [],//客户信息
            tableData:[],
            contracts: [{ value: '0', label: '用户合同' }, { value: '1', label: '客户合同' }],
            orderTypes: [{ value: '0', label: '整车' }, { value: '1', label: '零担' }],
            goodsTypes: [{ value: '0', label: '日用品' }, { value: '1', label: '食品' }, { value: '2', label: '文件' },
            { value: '3', label: '家具' }, { value: '4', label: '其他' },],
            orderSources: [{ value: '0', label: '用户订单' }, { value: '1', label: '客户订单' }],
            billingMethods: [{ value: '0', label: '按重量计算' }, { value: '1', label: '按体积计算' }],
            paymentMethods: [{ value: '0', label: '寄付' }, { value: '1', label: '到付' }],
            goods: [],//添加货物弹窗中的表格数据对象
            isCustomerDisabled: false, // 控制客户名称下拉框的禁用状态
            isUserDisabled: false, // 控制用户名称输入框的禁用状态
            selectedCustomer: null,
        }
    },

    methods: {
        refresh() {
            window.location.reload();
        },
        queryOrigin() {
            //查询所有始发地  复制张晨曦的
            this.$axios.get("/api/provincial/queryProvincial")
                .then(resp => {
                    console.log(resp.data)
                    if (resp.data.code == 200) {
                        this.originOptions = resp.data.data
                    }
                })
        },
        createSnowId() {
            this.$axios.get("/api/order/createSnowId")
                .then(resp => {
                    console.log(resp.data)
                    if (resp.data.code == 200) {
                        this.normalOrder.snowId = resp.data.data
                    }
                })
        },
        queryCustomer() {
            this.$axios.post("/api/order/queryCustomer")
                .then(resp => {
                    // console.log(11111111111111111111111111111);
                    console.log(resp.data)
                    if (resp.data.code == 200) {
                        this.customers = resp.data.data
                    }
                })
        },
        addGoods() {//添加货物
            this.addGoodsVisible = true
            this.$axios.post("/api/order/queryGoods")
                .then(resp => {
                    console.log(resp.data)
                    this.goods = resp.data.data
                })
        },
        handleCountChange(row) {
            // 当数量变化时，可以在这里处理相关逻辑，例如更新总数量等
        },
        saveAddGoods() {
            this.goods.forEach(good => {
                good.id = this.normalOrder.snowId;
            });
            this.$axios.post("/api/order/saveAddGoods", this.goods)
                .then(resp => {
                    console.log(resp.data)
                    this.queryGoods()
                })
        },
        queryGoods() {
            this.$axios.get("/api/order/queryGoods/" + this.normalOrder.snowId)
                .then(resp => {
                    console.log(resp.data)
                    this.tableData = resp.data.data
                    this.addGoodsVisible = false;
                })
        },
        handleCustomerChange() {
            if (this.normalOrder.customerId) {
                this.isUserDisabled = true;
            } else {
                this.isUserDisabled = false;
            }
            const selectedCustomer = this.customers.find(customer => customer.id === this.normalOrder.customerId);
            if (selectedCustomer) {
                // 填充联系人姓名、联系电话和收货地址
                this.normalOrder.contcompanyContactactName = selectedCustomer.companyContact; // 假设您在 normalOrder 中有 contactName 字段
                this.normalOrder.contactInfo = selectedCustomer.contactInfo;   // 假设您在 normalOrder 中有 contactTel 字段
                this.normalOrder.customerAddress = selectedCustomer.customerAddress; // 假设您在 normalOrder 中有 deliveryAddress 字段
            } else {
                // 如果没有找到客户，清空相关字段
                this.normalOrder.contactName = '';
                this.normalOrder.contactTel = '';
                this.normalOrder.deliveryAddress = '';
            }

        },
        createOrder() {

            console.log(this.normalOrder);

            this.$axios.post("/api/order/createOrder", this.normalOrder)
                .then(resp => {
                    console.log(resp.data)
                    if(resp.data.code === 200){
                        this.refresh();
                        this.$message({
                            message: '订单生成成功!!!!',
                            type: 'success'
                        });
                    }
                    if(resp.data.code === 2015){
                        this.$message({
                            message: '订单还未选择商品!!!!',
                            type: 'error'
                        });
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('信息未完全填写');
                });
        }


    },
    watch: {
        'normalOrder.userName'(newVal, oldVal) {
            if (newVal) {
                this.isCustomerDisabled = true;
            } else {
                this.isCustomerDisabled = false;
            }
        },
        calculatedTotalFee(newVal) {
            this.normalOrder.totalFee = newVal;
        }
    },

    computed: {
        totalGoodsCount() {
            return this.tableData.reduce((sum, item) => sum + item.goodsSmallCount, 0);
        },
        totalVolume() {
            return this.tableData.reduce((sum, item) => sum + (item.goodsVolume * item.goodsSmallCount), 0);
        },
        totalWeight() {
            return this.tableData.reduce((sum, item) => sum + (item.goodsWeight * item.goodsSmallCount), 0);
        },
        orderSource() {
            return this.normalOrder.customerId
                ? '客户订单'
                : this.normalOrder.userName
                    ? '用户订单'
                    : ''; // 空白
        },
        contractType() {
            return this.normalOrder.customerId
                ? '客户合同'
                : this.normalOrder.userName
                    ? '用户合同'
                    : ''; // 空白
        },
        totalFee() {
            return (
                Number(this.normalOrder.transportationFee) +
                Number(this.normalOrder.insuranceFee) +
                Number(this.normalOrder.packagingFee) +
                Number(this.normalOrder.loadingFee) +
                Number(this.normalOrder.transferFee) +
                Number(this.normalOrder.serviceFee) +
                Number(this.normalOrder.otherFees)
            ).toFixed(2); // 保留两位小数
        },



    },

    created() {
        this.queryOrigin();
        this.createSnowId();
        this.queryCustomer();
    }
}
</script>

<style scoped>
.box-card {
    margin-bottom: 20px;
}

.info-section {
    margin: 10px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.info-item {
    flex-basis: calc(33% - 10px);
    /* 减去margin-left的间距 */
    margin: 0 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 垂直对齐 */
}

.info-item span {
    margin-left: 10px;
    width: 180px;
    /* 确保宽度一致 */
}



.total-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    font-weight: bold;
}

.total-info div {
    margin-left: 20px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: #13d941;
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.custom-card {
    background-color: #D3DCE6;
    /* 你想要设置的底色 */
}

.button-group {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.fixed-buttons-horizontal {
    position: fixed;
    bottom: 20px;
    /* 根据需要调整距离底部的距离 */
    right: 20px;
    /* 根据需要调整距离右侧的距离 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* background-color: #f5f5f5; 容器的背景颜色 */
    /* padding: 10px; /* 内边距 */
    /* border-radius: 5px; 边框圆角 */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.2); 阴影效果 */
    z-index: 1000;
    /* 确保按钮位于最上层 */
}
</style>